<template>
    <div class="org_table" ref="OrgTableRef">
        <OrgTree :open-tree="openTree" class="org_tree" tree-title="组织架构树" :tree-expansion-width="treeExpansionWidth"
            @shrink="shrink" @expansion="expansion" @node-click="handleNodeClick"></OrgTree>
        <div class="table_p" :style="{ width: state.tableWidth + 'px' }">
            <Table class="table" ref="TabRef" :get-data="getData" :form-data="formData" :remove="remove"
                :table-size="tableSize" :org-key="orgKey">
                <template v-slot:from_search>
                    <slot name="from_search"></slot>
                </template>
                <template v-slot:columns>
                    <slot name="columns"></slot>
                </template>
            </Table>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from "vue"
import Table from '@/components/Table.vue'
import OrgTree from '@/components/OrgTree.vue'

const TabRef = ref(null)
const OrgTableRef = ref(null)

const props = defineProps({
    openTree: {
        type: Boolean,
        default() {
            return true
        },
    },
    treeExpansionWidth: {
        type: Number,
        default() {
            return 200
        },
    },
    selection: {
        type: Boolean,
        default() {
            return true
        },
    },
    tableSize: {
        type: String,
        default() {
            return 'default'
        },
    },
    orgKey: {
        type: String,
    },
    getData: {
        type: Function,
        default() {
            return () => { }
        }
    },
    formData: {
        type: Object,
        default() {
            return {}
        }
    },
    remove: {
        type: Function,
        default() {
            return () => { }
        }
    },
})

const state = reactive({
    allWidth: undefined,
    tableWidth: 0,
})


const queryData = () => {
    TabRef.value.queryData()
}

const handleDelete = (row) => {
    TabRef.value.handleDelete(row)
}
const initTableWidth = () => {
    state.tableWidth = state.allWidth - (props.openTree ? props.treeExpansionWidth : 15)
}
const expansion = () => {
    state.tableWidth = state.allWidth - props.treeExpansionWidth
}
const shrink = () => {
    state.tableWidth = state.allWidth - 15
}

const handleNodeClick = (node) => {
    TabRef.value.treeNodeClick(node)
}
onMounted(() => {
    state.allWidth = OrgTableRef.value.offsetWidth
    initTableWidth()
})

defineExpose({ queryData, handleDelete })
</script>
<style scoped lang="scss">
.org_table {
    display: flex;
    height: 100%;

    .org_tree {
        flex-shrink: 0;
    }

    .table_p {
        height: 100%;
    }

    .table {
        padding-left: 10px;
    }
}
</style>
